@import "app.scss";

.door-container {
  .door-header {
    height: r(377);
    position: relative;

    .d-img {
      width: 100%;
      height: 100%;
    }

    .w-warp {
      position: absolute;
      top: r(100);
      left: 50%;
      font-size: 14px;
      transform: translateX(-50%);
      color: #ffffff;
      text-align: center;

      .temperature {
        font-size: 60px;
        position: relative;

        &::after {
          position: absolute;
          top: (-50%);
          content: "。";
        }
      }

      .air {
        width: r(120);
      }

      .weather {
        width: r(48);
        margin: 0 r(20);
      }

      .address {
        width: r(48);
      }

    }

    .menu {
      position: absolute;
      bottom: 60px;
      left: 50%;
      font-size: 14px;
      color: #fff;
      transform: translateX(-50%);

      .mr46 {
        margin-right: r(16);
      }

      .menuitem {
        width: r(70);

        .item-icon {
          width: r(28);
          height: r(28);

          .i-img {
            width: 100%;
            height: 100%;
          }
        }
        .item-title {
          margin-top: r(13);
        }
      }
    }

    .robot-img {
      width: r(61);
      height: r(72);
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-100%);
    }
  }

  .door-content {
    .switch {
      width: r(68);
      height: r(68);
      background-color: #327BFD;
      position: relative;
      border-radius: 50%;
      margin-top: r(32);

      .s-img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: r(28);
        height: r(28);
        transform: translate(-50%, -50%);
      }
    }
    .open {
      font-size: 14px;
      margin-top: r(20);
    }
  }
}